<template>
  <div class="user-dialog">
    <a-form-model
      :model="form"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-row>
        <a-col :span="22">
          <a-form-model-item label="应用密钥">
            <a-input disabled aria-readonly v-model="form.appSecret"/>
          </a-form-model-item>
        </a-col>
        <a-col :span="2">
          <a-form-model-item label="">
            <a @click.stop.prevent="copyAppSecret()" title="点击复制">&nbsp;复制</a>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
  </div>
</template>

<script>
  import ACol from "ant-design-vue/es/grid/Col";

  export default {
    components: {ACol},
    name: 'UserSecretDialog',
    data() {
      return {
        labelCol: {span: 4},
        wrapperCol: {span: 20},
        form: {}
      }
    },
    props: {
      record: {
        type: Object,
        default: () => ({})
      }
    },
    created() {
      this.form = this._.cloneDeep(this.record)
    },
    mounted() {
    },
    methods: {
      copyAppSecret() {
        this.copyToClipboard(this.form.appSecret);
        this.$message.success('应用信息已复制到粘贴板!');
      },
      copyToClipboard(text) {
        // 创建一个虚拟的DOM元素
        const element = document.createElement('textarea');
        element.value = text;
        document.body.appendChild(element);

        // 选中文本
        element.select();
        element.setSelectionRange(0, element.value.length);

        // 执行复制命令
        document.execCommand('copy');

        // 清理虚拟DOM元素
        document.body.removeChild(element);
      }
    }
  }
</script>

<style lang="less" scoped>
  /deep/ .ant-input-number {
    width: 375px;
  }

</style>
